<template>
	<view class="page">
		<view class="header">
			<text class="welcome-text">欢迎回来, {{ user.nickName }} <br></text>
			<text class="health-status">今日步数: {{ healthData.steps }} 步</text>
		</view>

		<view class="data-section">
			<view class="card">
				<text class="card-title">今日燃烧KCAL <br></text>
				<text class="card-value">{{ healthData.caloriesBurned }}</text>
			</view>
			<view class="card">
				<text class="card-title">体重kg <br> </text>
				<text class="card-value">{{ healthData.weight }}</text>
			</view>
		</view>

		<view class="progress-section">
			<view class="progress-card">
				<text class="progress-title">运动目标</text>
				<view class="progress-bar">
					<view class="progress-fill" :style="`width: ${healthData.exerciseProgress}%`"></view>
				</view>
				<text class="progress-text">{{ healthData.exerciseProgress }}%</text>
			</view>
		</view>

		<view class="reminder-section">
			<view class="reminder">
				<text class="reminder-title">今日提醒：</text>
				<text class="reminder-text">{{reminder}}</text>
			</view>
		</view>

		<view class="action-buttons">
			<button class="action-btn" @click="getData">获取健康数据</button>
			<button class="action-btn" @click="updateHealthDatas">更新健康数据</button>
			<!-- <button class="action-btn" @click="addWeight">添加体重</button> -->
		</view>
	</view>
</template>

<script>
	import {
		updateHealthData,
		getHealthDataByDate,
		getAllHealthData
	} from '@/api/heath.js'
	export default {
		data() {
			return {
				userName: "张三",
				goalSteps: 10000,
				caloriesBurned: 300,
				weight: 68.5,
				exerciseProgress: 50,
				user: null,
				healthData: {
					//步数
					steps:0,
					//燃烧卡路里
					caloriesBurned:0,
					//体重
					weight:0,
					//运动目标进度
					exerciseProgress:0
				},
				reminders: [
					"记得喝水！",
					"适当休息，放松一下！",
					"保持好心情，每天都是新开始！",
					"做一些运动，让身体更健康！",
					"关心家人和朋友，分享你的快乐！",
					"整理一下工作或学习环境，让效率更高！"
				],
				reminder: ''
				
			};
		},
		created() {
			this.user = uni.getStorageSync("user")
			if (!this.user) {
				// 如果用户为空，跳转到登录页面
				uni.navigateTo({
					url: '/minePages/login'
				});
				// 延迟 1.5 秒后弹窗提示
				setTimeout(() => {
					uni.showToast({
						title: '请先登录！',
						icon: 'none',
						duration: 2000 // 显示 2 秒
					});
				}, 1500);
			}
			//获取健康数据初始化
			this.getData();
			//每日提醒
			this.getRandomReminder();
		},
		methods: {
			//更新健康数据 页面跳转
			updateHealthDatas() {
				uni.navigateTo({
					url: '/pages/heath/addHeathData'
				});
			},
			//获取健康数据
			async getData() {
				const todayDate = this.getTodayDate(); // 动态获取今天的日期
				const userInfo = this.user;
				await getHealthDataByDate(this.user.userId + "", todayDate).then(res => {
					 if(res.code != 200){
						this.$tn.message.toast(res.msg)
					}else{
						this.$tn.message.toast("已更新最新数据!")
					}
					this.healthData = res.data;
					this.healthData.exerciseProgress = Math.min((res.data.steps / this.goalSteps) * 100, 100)
						.toFixed(2);
						

				})
			},
			// 获取今天的日期
			getTodayDate() {
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份补零
				const day = String(today.getDate()).padStart(2, '0'); // 日期补零
				return `${year}-${month}-${day}`; // 返回格式化日期
			},
			//今日提醒
			getRandomReminder() {
				const index = Math.floor(Math.random() * this.reminders.length);
				this.reminder = this.reminders[index];
			}
		}
	};
</script>

<style scoped>
	.page {
		padding: 20px;
		background: linear-gradient(135deg, #1E90FF, #FF6347);
		display: flex;
		flex-direction: column;
		height: 100vh;
		color: #fff;
		/* 确保文本在渐变背景上清晰可见 */
	}

	.header {
		text-align: center;
		margin-bottom: 20px;
	}

	.welcome-text {
		font-size: 28px;
		color: #333;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.health-status {
		font-size: 18px;
		color: #666;
	}

	.data-section {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.card {
		width: 48%;
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.card-title {
		font-size: 16px;
		color: #999;
	}

	.card-value {
		font-size: 22px;
		color: #1E90FF;
		font-weight: bold;
	}

	.progress-section {
		margin-bottom: 20px;
	}

	.progress-card {
		background: #fff;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}

	.progress-title {
		font-size: 18px;
		color: #333;
		margin-bottom: 10px;
	}

	.progress-bar {
		height: 10px;
		background: #e0e0e0;
		border-radius: 5px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.progress-fill {
		height: 100%;
		background: #1E90FF;
		border-radius: 5px;
	}

	.progress-text {
		font-size: 14px;
		color: #666;
		text-align: center;
	}

	.reminder-section {
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.reminder-title {
		font-size: 18px;
		color: #333;
		margin-bottom: 10px;
	}

	.reminder-text {
		font-size: 16px;
		color: #FF6347;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin-top: auto;
		padding: 10px 0;
	}

	.action-btn {
		width: 80%;
		padding: 12px;
		background: #1E90FF;
		color: white;
		border-radius: 8px;
		text-align: center;
		font-size: 16px;
		margin: 10px auto;
	}

	.action-btn:active {
		background: #187bcd;
	}
</style>